<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>内容生成</title>

        <style type="text/css">

            /* 相当于自定义一个字体(font-family) */
            @font-face {
                font-family: 'FontAwesome';
                src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
                src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
                    url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
                    url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
                    url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
                font-weight: normal;
                font-style: normal;
            }

            .container {
                width: 80vw;
                padding: 10px;
                border: 1px solid blue;
                margin: 15px auto;
            }

            .container>span {
                border: 1px solid green;
            }

            .first::before {
                content: '吴恭亨: ';
            }

            .first::after {
                display: inline-block;
                font: normal normal normal 14px/1 FontAwesome;
                font-size: inherit;
                content: '\f01a';
            }

            .second::before {
                content: open-quote;
            }

            .second::after {
                content: close-quote;
            }

            .third::before {
                content: attr(title);
            }

            .fourth {
                display: inline-block;
            }

            .fourth::before,
            .fourth::after {
                content: url("feifei.webp");
            }
        </style>
    </head>

    <body>

        <div class="container">
            <span class="first">
                <b>有志者、事竟成，破釜沉舟，百二秦关终属楚</b>
                <b>苦心人、天不负，卧薪尝胆，三千越甲可吞吴</b>
            </span>
        </div>

        <div class="container">
            <span class="second">
                <b>有志者、事竟成，破釜沉舟，百二秦关终属楚</b>
                <b>苦心人、天不负，卧薪尝胆，三千越甲可吞吴</b>
            </span>
        </div>

        <div class="container">
            <span class="third" title="吴恭亨说">
                <b>有志者、事竟成，破釜沉舟，百二秦关终属楚</b>
                <b>苦心人、天不负，卧薪尝胆，三千越甲可吞吴</b>
            </span>
        </div>

        <div class="container">
            <span class="fourth">
                <b>有志者、事竟成，破釜沉舟，百二秦关终属楚</b>
                <b>苦心人、天不负，卧薪尝胆，三千越甲可吞吴</b>
            </span>
        </div>
        
    </body>
</html>